<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-09-11 10:45:35
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2023-11-24 09:36:26
 * @FilePath: /things-admin/src/view/signlog/components/Modal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <Modal v-model="modal" :title="title" @on-ok="ok" @on-cancel="cancel">
      <div class="inputContent" v-if="title == 1">
        <div class="title">签到积分ID</div>
        <Input v-model="id" />
      </div>
      <div class="inputContent">
        <div class="title">签到天数</div>
        <Input v-model="day" maxlength="4" @on-change="changeValue" />
        <span v-show="span1" class="span1">签到天数为1-1000的数字</span>
      </div>
      <div class="inputContent">
        <div class="title">签到积分</div>
        <Input v-model="point" maxlength="5" @on-change="changeValueCope" />
        <span v-show="span2" class="span2">签到积分为1-10000的数字</span>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "新增积分",
    },
    isShow: {
      type: Boolean,
      default: false,
    },
    signPointsId: {
      type: Number,
      default: 0,
    },
    signPointsDay: {
      type: Number,
      default: 0,
    },
    signPointsPoint: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      modal: this.isShow,
      id: this.signPointsId,
      day: this.signPointsDay,
      point: this.signPointsPoint,
      span1:false,
      span2:false

    };
  },
  watch: {
    isShow(newval) {
      this.modal = newval;
    },
    modal(newval) {
      // 当窗口关闭的时候数据清空
      if(!newval){
        this.id = ''
        this.day = ''
        this.point = ''
        this.span1 = false
        this.span2 = false
      }else{
        this.id = this.signPointsId
        this.day =  this.signPointsDay
        this.point = this.signPointsPoint
      }
    },
    signPointsId(newval) {
        this.id = newval;
    },
    signPointsDay(newval) {
        this.day = newval;
    },
    signPointsPoint(newval) {
        this.point = newval;
    },
  },
  methods: {
    //输入框数据改变 对输入的内容做一个正则判断 
    changeValue(){
      let reg1 = /^\d{1,3}|^[1-9]\d{1,2}|^1000$/
      if(reg1.test(Number(this.day)) &&  (this.day !=0)){
        this.span1 = false
      }else{
        this.span1 = true
      }
    },
     //输入框数据改变 对输入的内容做一个正则判断
    changeValueCope(){
      let reg2 = /^\d{1,4}|^[1-9]\d{1,3}|^10000$/
      if(reg2.test(Number(this.point)) && (this.point!=0)){
        this.span2 = false
      }else{
        this.span2 = true
      }
    },
    ok() {
      this.modal = false;
      if(this.title=='新增积分'){
        var signPoints={
        day:Number(this.day),
        point: Number(this.point)
      }
      }else{
        var signPoints={
          id:Number(this.id),
          day:Number(this.day),
          point:Number(this.point)
      }
      }

      this.$emit("changeData", this.modal, signPoints);
    },
    cancel() {
      this.modal = false;
      this.$emit("changeData", this.modal);
    },
  },
  mounted() {
    console.log(this.signPointsId);
  },
};
</script>

<style lang="less" scoped>
.inputContent {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .title {
    width: 100px;
  }
  .span1 {
    position: absolute;
    color: red;
    font-size: 12px;
    top: 32px;
    left: 80px;
  }
  .span2 {
    position: absolute;
    color: red;
    font-size: 12px;
    top: 32px;
    left: 80px;
  }
}
::v-deep .ivu-modal-header {
  border: none;
}
::v-deep .ivu-modal-footer {
  border: none;
}
</style>
